<template>
  <Card>
    <h3 style="padding: 10px 0;">drag-drawer组件是对iview的drawer组件的封装，在支持drawer所有api的基础上，支持可拖动和footer底部插槽</h3>
    <div style="padding: 10px 0">
      <b>
        方向
        <i-switch v-model="placement">
          <span slot="open">左</span>
          <span slot="close">右</span>
        </i-switch>
      </b>
      <b>
        是否可拖动
        <i-switch v-model="draggable"></i-switch>
      </b>
      <Button @click="showContainerBDrawer = !showContainerBDrawer" type="primary" style="margin-left: 10px">{{
        showContainerBDrawer ? '关闭' : '打开' }}容器内抽屉
      </Button>
      <Button @click="showWindowBDrawer = true" type="primary" style="margin-left: 10px">打开全屏抽屉</Button>
    </div>
    <div class="drag-drawer-inner-box">
      <drag-drawer v-model="showContainerBDrawer"
                   :width.sync="width2"
                   min-width="30px"
                   :inner="true"
                   :transfer="false"
                   :placement="placementComputed"
                   :draggable="draggable"
                   @on-resize="handleResize"
                   :scrollable="true">
        <div slot="header">
          <Icon type="md-aperture" :size="18"></Icon>
          <b>这是标题</b>
        </div>
        <p v-for="n in 200" :key="n">{{ n }}</p>
        <div slot="footer">
          <p>123123</p>
          <p>21312</p>
        </div>
      </drag-drawer>
    </div>
    <drag-drawer v-model="showWindowBDrawer"
                 :width.sync="width1"
                 :min-width="300"
                 :placement="placementComputed"
                 :draggable="draggable"
                 :scrollable="true">
      <div slot="header">
        <Icon type="md-aperture" :size="18"></Icon>
        <b>这是标题</b>
      </div>
      <Button @click="showBDrawer3 = true">显示多层</Button>
      <p v-for="n in 200" :key="n">{{ n }}</p>
    </drag-drawer>
  </Card>
</template>

<script>
  import DragDrawer from '_c/drag-drawer'

  export default {
    name: 'drag_drawer_page',
    components: {
      DragDrawer
    },
    data () {
      return {
        showWindowBDrawer: false,
        showContainerBDrawer: false,
        showBDrawer3: false,
        width1: 300,
        width2: 200,
        placement: false,
        draggable: true
      }
    },
    computed: {
      placementComputed () {
        return this.placement ? 'left' : 'right'
      }
    },
    methods: {
      handleResize (event) {
        const { atMin } = event
        /* eslint-disable */
        console.log(atMin)
      },
    }
  }
</script>

<style lang="less">
  .drag-drawer-inner-box {
    position: relative;
    width: 500px;
    height: 400px;
    background: pink;
    border: 1px solid pink;
  }
</style>
